<template>
	<view>
		<swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image class="img" :src="detail.img" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="flex justify-around">
			<view v-for="(item,index) in detail.list" :key="index" :class="['padding-sm',{active:tabIdx==index}]" @click="changeTab(index)">
				<view class="">{{item.spec}}</view>
				<view class="">{{item.weight}}</view>
				<view class="">{{item.edible}}</view>
			</view>
		</view>
		<view class="padding fs-28 u-border-bottom">
			￥{{detail.list[tabIdx].price}}
		</view>
		<view class="padding fs-28 u-border-bottom">
			{{detail.list[tabIdx].ahead}}
			<text class="margin-lr">{{detail.list[tabIdx].size}}</text>
			{{detail.list[tabIdx].edible}}
		</view>
		<view class="padding fs-28 u-border-bottom">
			{{detail.list[tabIdx].fittings}}
		</view>
		<view class="flex justify-around fixed padding-tb-sm">
			<button class="cu-btn bg-brown lg" type="default" @click="handleAdd({...detail,idx:tabIdx})">加入购物车</button>
			<button class="cu-btn bg-yellow lg" type="default">立即购买</button>
		</view>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex'
	export default {
		data() {
			return {
				tabIdx:0,  //切换选中的子商品序号
				detail: null
			}
		},
		methods: {
			handleBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			handleMy() {
				uni.switchTab({
					url: '../my/my'
				})
			},
			...mapMutations({
				'handleAdd': 'cart/cartAddMut'
			}),
			changeTab(index){
				this.tabIdx = index
			}
		},
		onLoad() {
			let detail = uni.getStorageSync('detail')
			// console.log(detail);
			this.detail = detail
		}
	}
</script>

<style lang="scss">
.img {
	width: 100vw;
}
.active {
	border-bottom: 2upx solid #ffe32a !important;
}
.banner {
	height: 570upx;
	swiper-item {
		height: 570upx;
	}
	images {
		width: 100%;
		height: 570upx;
	}
}
.fixed {
	position: fixed !important;
	bottom: 0;
	left: 0;
	z-index: 99;
	width: 100%;
	box-shadow: 0 0 10upx 2upx rgba(0,0,0,0.2);
}
.cu-btn {
	width: 40%;
}
</style>
